import React, { useContext, useEffect, useRef, useState } from "react";
import bgImg from '@/assets/images/paget-title-head.png'
import { Button, Space, message } from 'antd';
import { Link, useLocation } from "react-router-dom";
import { DownloadOutlined, FilterOutlined, PieChartOutlined } from '@ant-design/icons';
import PanelOfCreateTask from "./downTask/creteDownForm";
import Zc_drawer from "./zc-drawer/zc-drawer";
import SelectUnitComponent from "./select-unit/selectUnitData";
import { post } from "@/utils/request";
import { Context } from "@/app-context/main-context";
import { getUrlParam } from "@/utils/getUrlData";

function Pageheader({ urlConfig = {} }) {
    const { userCode, secComCode, data, auth,comSName } = urlConfig;
    const location = useLocation()
    const { pathname } = location;
    console.log("当前的路径是：", pathname)

    const { condition, setCondition } = useContext(Context)
    const drawerRef = useRef(null);
    const DownRef = useRef(null)
    // 下载弹框的控制
    const onRef = useRef(null)


    // 查询机构树/或者来源渠道
    const queryList = async ({ url, params, success, failure, complate }) => {
        try {
            const res = await post(url, {
                ...params,
                userCode: getUrlParam("userCode")
            })
            if (res.responseCode === "0000") {
                // success(res)
                // const data = res.data;
                if (res.data?.unit?.length > 0) {
                    success(res.data?.unit)
                }
            } else {
                failure(res)
                message.error(res.responseMsg)
            }
        } catch (error) {
            failure(error)
        } finally {
            complate()
        }
    }



    // 机构树
    const [unitData, setUnitData] = useState([]);
    // 来源渠道
    const [sourceData, setSourceData] = useState([]);
    useEffect(() => {
        // 获取机构树
        queryList({
            url: "/cifgp-core-api/stat/queryUnit",
            params: {
                userCode: sessionStorage.getItem("userCode")
            },
            success: (unit) => {
                setUnitData(unit)
            },
            failure: () => { },
            complate: () => { },
        })

    }, [])

    // // getObject
    // const getObject = ({ code, list }) => {
    //     // console.log("code,list", code, list)
    //     let comName = null
    //     function each(list) {
    //         for (var i = 0; i < list.length; i++) {
    //             if (list[i].comCode === code) {
    //                 return list[i].comSName;
    //             }
    //             else if (list[i].untList?.length&&list[i].untList.length > 0) {
    //                 // console.log("有没有走过这里？",list[i].untList)
    //                  each(list[i].untList)
    //             } else {

    //             }
    //         }
    //     }


    //     comName = each(list)

    //     console.log("最终结果：", comName)
    // }

    // useEffect(() => {

    //     if (unitData && unitData.length > 0) {
    //         console.log("监听：condition.comCode", condition.comCode, "\n", unitData)
    //         getObject({
    //             code: condition.comCode,
    //             list: unitData
    //         })
    //     }
    // }, [condition.comCode, unitData])

    const showTime = (str) => {
        console.log(str, "长度是多少啊？")
        str = str.toString()
        if (str.length === 4) {
            return str + "年";
        }
        var list = str.split("");//list=[2,0,2,2,0,1]
        list.splice(4, 0, "年");
        list.push("月");
        return list.join("")


        // var yearStr = str.splice(4, 2);
        // var monStr = str.splice(0, 4);
        // console.log("日期：", yearStr + "年" + monStr + "月")
    }


    return (
        <>
            <Zc_drawer

                drawerRef={drawerRef} >
                <SelectUnitComponent
                    cancel={() => { drawerRef.current.onClose() }}
                    title={"筛选机构"}
                    sourceData={sourceData}
                    treeData={unitData}
                    condition={condition}
                    setCondition={setCondition}
                />
            </Zc_drawer>
            <Zc_drawer
                drawerRef={DownRef}
                style={{
                    height: "auto",
                    maxHeight: 800
                }}
            >
                <PanelOfCreateTask
                    onRef={onRef}
                    cancel={() => { DownRef.current.onClose() }}
                    sourceData={sourceData}
                    treeData={unitData}
                />
            </Zc_drawer>

            <div className="pageHeader">
                <div className="header-container">
                    <div className="log">
                        {/* <span className="select-info"></span> */}
                        <span className="title">{showTime(condition.statDate)}-{condition.comSName}-机构客户群画像</span>
                        <span className="bg">
                            <img src={bgImg} alt="" />
                        </span>
                    </div>
                    <div className="action">
                        <div className="tips">

                        </div>
                        <div className="action-down">
                            <Space>
                                <Button onClick={() => drawerRef.current.setOpen(true)} type="link" icon={<FilterOutlined />} size={'small'}>
                                    条件筛选
                                </Button>
                                {/* <Button
                                    onClick={() => DownRef.current.setOpen(true)}
                                    type="link"
                                    icon={<DownloadOutlined />}
                                    size={'small'}
                                >
                                    下载
                                </Button> */}
                            </Space>
                        </div>

                    </div>
                </div>
                <div className="menu-box">
                    <div className="menu-container">
                        <a>
                            <div className={pathname === "/" ? "menu-item  active" : "menu-item "}>
                                <Link to={`/?userCode=${userCode}&comSName=${encodeURI(encodeURI(comSName))}&secComCode=${secComCode}&data=${data}&auth=${auth}`}>
                                    <span className="icon"><PieChartOutlined /></span>
                                    <span className="">综合指标</span>
                                </Link>
                            </div>
                        </a>
                        <a >
                            <div className={pathname === "/base" ? "menu-item  active" : "menu-item "}>
                                <Link to={`/base?userCode=${userCode}&comSName=${encodeURI(encodeURI(comSName))}&secComCode=${secComCode}&data=${data}&auth=${auth}`}>
                                    <span className="icon"><PieChartOutlined /></span>
                                    <span className="">基础指标</span>
                                </Link>

                            </div>
                        </a>

                        <a>
                            <div className={pathname === "/veh" ? "menu-item  active" : "menu-item "}>
                                <Link to={`/veh?userCode=${userCode}&comSName=${encodeURI(encodeURI(comSName))}&secComCode=${secComCode}&data=${data}&auth=${auth}`}>
                                    <span className="icon"><PieChartOutlined /></span>
                                    <span className="">车辆指标</span>
                                </Link>

                            </div>
                        </a>


                    </div>
                    <div className="menu-container">

                        <a >
                            <div className={pathname === "/act" ? "menu-item  active" : "menu-item "}>
                                <Link to={`/act?userCode=${userCode}&comSName=${encodeURI(encodeURI(comSName))}&secComCode=${secComCode}&data=${data}&auth=${auth}`}>
                                    <span className="icon"><PieChartOutlined /></span>
                                    <span className="">客户行为指标</span>
                                </Link>

                            </div>
                        </a>

                        <a >
                            <div className={pathname === "/fxq" ? "menu-item  active" : "menu-item "}>
                                <Link to={`/fxq?userCode=${userCode}&comSName=${encodeURI(encodeURI(comSName))}&secComCode=${secComCode}&data=${data}&auth=${auth}`}>
                                    <span className="icon"><PieChartOutlined /></span>
                                    <span className="">反洗钱指标</span>
                                </Link>

                            </div>
                        </a>
                        <a>
                            <div className={pathname === "/ins" ? "menu-item  active" : "menu-item "}>
                                <Link to={`/ins?userCode=${userCode}&comSName=${encodeURI(encodeURI(comSName))}&secComCode=${secComCode}&data=${data}&auth=${auth}`}>
                                    <span className="icon"><PieChartOutlined /></span>
                                    <span className="">承保指标</span>
                                </Link>

                            </div>
                        </a>
                        <a >
                            <div className={pathname === "/clm" ? "menu-item  active" : "menu-item "}>
                                <Link to={`/clm?userCode=${userCode}&comSName=${encodeURI(encodeURI(comSName))}&secComCode=${secComCode}&data=${data}&auth=${auth}`}>
                                    <span className="icon"><PieChartOutlined /></span>
                                    <span className="">理赔指标</span>
                                </Link>

                            </div>
                        </a>

                    </div>
                </div>
            </div>

        </>
    )
}
export default Pageheader